<template>
	<view class="table" style="z-index: 9999;">
		<view class="weiXinTab"
			:class="{
				isActive: item.value == currentIndex,
				isSticky: isSticky
			}"
			v-for="(item, index) in tabBars" :key="index" @click="tabChange(item)">
				{{ item.name }}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabBars: {
				type: Array,
				default: ()=>Array
			},
			currentIndex: {
				type: Number | String,
				default: 0
			},
			isSticky: {
				default: true
			}
		},
		methods: {
			tabChange(item) {
				this.$emit('change',item)
			} 
		}
	}
</script>

<style lang="less" scoped>
	.table {
		width: 750rpx;
		height: 108rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-bottom: #f3f3f3 9rpx solid;
		.isSticky {
			position: sticky;
			top: 0;
		}
		.weiXinTab {
			font-size: 32rpx;
			position: relative;
			flex: 1;
			border-radius: 38rpx;
			color: #666666;
			line-height: 108rpx;
			text-align: center;
			// transition: all 1s;
		}
		
		.weiXinTab:not(:last-child)::after {
			content: '|';
			position: absolute;
			right: -2rpx;
			color: #666666;
		}
		.isActive {
			color: #333333;
		}
	
		.isActive::before{
			content: '';
			width: 84rpx;
			height: 8rpx;
			background: #3C8EFF;
			border-radius: 8rpx;
			position: absolute;
			bottom: 0;
			left: 50%;  
			transform: translateX( -50%);
		}
	}
	
	
		
</style>